<template>
  <div id="a">
    <!-- :key key值是唯一不重复的字符串或数字 -->
    <ul>
      <li v-for="val in stuArr">{{val.name}} --{{val.sex}} -- {{val.hobby}}</li>
    </ul>
    <button @click="revBtn">翻转后排转前排</button>
    <button @click="sliceBtn">留住前三个</button>
    <button @click="updateBtn">更新第一个</button>
    <button @click="addOne">加一个</button>
    <hr/>
    <ul>
      <li v-for="val in stuArr" :key="val.id">{{val.name}} --{{val.sex}} -- {{val.hobby}}</li>
    </ul>
    <button @click="addObj">欢迎新同学</button>
  </div>
</template>

<script>
export default {

  data() {
    return {
      arr: ['陈小姑','白文政','陈伟彬', '王峰 ', '张旭娟'],
      stuArr:[
        {
          id: 23,
          name: '牛善文',
          sex: '不详',
          hobby: '妹子'
        },
        {
          id: 2444,
          name: '李文卓',
          sex: '男',
          hobby: '就玩游戏,敲代码'
        },
        {
          id: 3555,
          name: '徐超晨',
          sex: '中性',
          hobby: '通吃'
        },
      ],
    }
  },
  methods: {
    revBtn() {
      // 数组翻转方法 v-for更新了
      this.arr.reverse()
      
    },
    sliceBtn() {
      //  slice方法 不会造成v-for更新
      // let newArr = this.arr.slice(0,3)
      // console.log(newArr)
      // console.log('arr', this.arr)
      // this.arr = newArr
      // splice方法 第一个参数 起始位置  第二个参数 删除几个  第三个参数 新增值
      this.arr.splice(3,2)
      console.log('arr', this.arr);

    },
    updateBtn() {
      // 更新数组某个值的时候, v-for监听不到
      // this.arr[0] = '赵平安'
      // 参数1  更新的数据结构   参数2  更新的位置  参数3  更新值
      this.$set(this.arr, 0, '张鑫')
    },
    addOne () {
      this.arr.splice(1,0,'王世奥')
    },
    addObj () {
      this.stuArr.splice(1,0,{
          id: 324,
          name: '高强1',
          sex: '中性',
          hobby: '牛善文'
        })
    }
  }
}
</script>

<style>

</style>